<template>
  <md-scroll-view
    id="use-mode-selector"
    ref="scrollView"
    :scrolling-y="false"
    :auto-reflow="true"
    :bouncing="false"
    :class="modes.length<=3?'centered-selector':''"
  >
    <use-mode-selector-item
      v-for="(item,index) in modes"
      :key="index"
      :item="item"
      @click.native="onItemClick(item,index, $event)"
    ></use-mode-selector-item>
  </md-scroll-view>
</template>
<script>
import { ScrollView } from 'mand-mobile';
import UseModeSelectorItem from './UseModeSelectorItem';
export default {
  name: 'use-mode-selector',
  props: {
    modes: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      middleRect: null
    };
  },
  components: {
    [ScrollView.name]: ScrollView,
    [UseModeSelectorItem.name]: UseModeSelectorItem
  },
  methods: {
    onItemClick(item, index, event) {
      if (item.selected) {
        this.$emit('showcostpage', item);
        return;
      }
      this.modes.forEach(i => {
        i.selected = false;
      });
      item.selected = true;
      this.$emit('onSelect', item);

      if (this.modes.length <= 3) {
        return;
      }
      if (index === 0 || index === this.modes.length - 1) {
        return;
      }
      let rect = event.currentTarget.getBoundingClientRect();
      let scrollNumber = rect.width * (index - 1);
      this.$refs.scrollView.scrollTo(scrollNumber, 0, true);
    }
  }
};
</script>
<style lang="stylus">
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h6, h5 {
  display: block;
  font-size: 22px;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: 400;
}

#use-mode-selector {
  width: 100%;

  .scroll-view-container {
    display: inline-flex;
    flex-direction: row;
  }
}

.centered-selector {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
